<!DOCTYPE html>
<!--
	Flex + align-content
	
	当子层元素不确定有多少个时，且有时可能会有单个的情况出现时，此技巧就能用到了
-->
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box {
				height: 250px;
				border: 1px solid #f00;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-content: center;
			}
			
			.content {
				width: 400px;
				background: #ccc;
			}
			
			.box:before,
			.box:after {
				content: '';
				display: block;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="content"> 立马来看Amos实际完成的
				<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/"> CSS3精美相册效果 </a> 效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！
			</div>
		</div>
	</body>

</html>